<template>
	<fui-tabbar :tabBar="tabBar" :current="activeIndex" @click="itemClick"></fui-tabbar>
</template>

<script>
import { defineComponent, reactive, toRefs, computed, ref, onMounted } from 'vue';
import { useCounterStore } from '@/store/equipment/index.js';
export default defineComponent({
	setup() {
		const state = reactive({
			activeIndex: useCounterStore().current,
			tabBar: [
				{
					index: 0,
					text: '首页',
					pagePath: '/pages/home/index',
					iconPath: '/static/tabbar/home.png',
					selectedIconPath: '/static/tabbar/home_active.png'
				},
				{
					index: 1,
					text: '桌子',
					pagePath: '/pages/desk/index',
					iconPath: '/static/tabbar/desk.png',
					selectedIconPath: '/static/tabbar/desk_active.png'
				},
				{
					index: 2,
					text: '消息',
					pagePath: '/pages/message/index',
					iconPath: '/static/tabbar/message.png',
					selectedIconPath: '/static/tabbar/message_active.png'
				},
				{
					index: 3,
					text: '圈子',
					pagePath: '/pages/circle/index',
					iconPath: '/static/tabbar/circle.png',
					selectedIconPath: '/static/tabbar/circle_active.png'
				},
				{
					index: 4,
					text: '我的',
					pagePath: '/pages/mine/index',
					iconPath: '/static/tabbar/mine.png',
					selectedIconPath: '/static/tabbar/mine_active.png'
				}
			]
		});
		const store = useCounterStore();
		state.activeIndex = store.current;
		const itemClick = async (event) => {
			try {
				store.setCurrent(event.index);
			} catch (e) {
				console.log(e);
				//TODO handle the exception
			}
			uni.switchTab({
				url: event.pagePath
			});
		};
		return {
			...toRefs(state),
			itemClick
		};
	}
});
</script>

<style></style>
